<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>详情</title>
    <link rel="stylesheet" href="css/index.css" />
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/jquery-1.11.0.js"></script>
    <style>
.List{
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    margin-top: 10px;
    border: 1px solid #f2f2f2; 
    margin-bottom: 10px;
    background-color: white;
}

/* 左侧放大镜 */
.leftList{
    width: 440px;
    height: 570px;
    float: left;
    position: relative;
}
.picBox{
    width: 420px;
    height: 420px;
    margin-left: 10px;
    margin-top: 10px;
    position: relative;
}
.picBox img{
    width: 100%;
    height: 100%;
}

.zoom{
    display: none;
    width: 230px;
    height: 230px;
    background-color: yellow;
    opacity: .5;
    position: absolute;
    cursor: move;
}

.zoomBox{
    display: none;
    width: 420px;
    height: 420px;
    float: left;
    position: relative;
    left: 440px;top:-420px;
    background-color: yellow;
    overflow: hidden;
    z-index: 99;
    border: 1px solid #c0c0c0;
}

.zoomBox img{
    position: absolute;
    width: 840px;
    height: 840px;
}

.smallBox{
    width: 420px;
    height: 80px;
    padding: 0 10px 0 10px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    top :440px;
}

.smallBox img{
    float: left;
    width: 54px;
    height: 54px;
    
}
/* 中间详情 */
.midList{
    width: 558px;
    height: 480px;
    float: left;
    margin-top: 10px;
    background-color: white;
}
.midListTitle{
    width: 558px;
    height: 100px;
    padding-left: 10px;
}
.midListTitle h3{
    width: 528px;
    font-size: 16px;
    min-height: 20px;
    line-height: 20px;
}
.midListTitle p{
    width: 528px;
    min-height: 18px;
    line-height: 18px;
    font-size: 14px;
    color: #c33;
    padding: 8px 0 3px;
}
.midListPrice{
    height: 50px;
    margin-top: 5px;
    line-height: 50px;
    position: relative;
    z-index: 1;
    padding-left: 10px;
    background-color: #fafafa;
}
.midListPrice span{
    float: left;
    width: 36px;
    color: #666;
    padding-right: 28px
}
.midListPrice strong{
    color: #cc3333;
    display: block;
    float: left;
    height: 50px;
    line-height: 50px;
    font-size: 26px;
}
.midListBuy{
    border-top: 1px dotted #c0c0c0;
    margin-top: 10px;
}
.address{
    height: 20px;
    padding:10px;
}
.shuMu{
    height: 38px;
    padding-left: 10px;
}
.shuMu span{
    display: block;
    float: left;
    width: 50px;
    height: 38px;
    line-height: 38px;
}
.shuMu span:last-child{
    position: relative;
}
.shuMu span:last-child input{
    width: 40px;
    height: 22px;
    position: absolute;
    left: 0;top: 8px;
    color: #999;
    border: 1px solid #999;
}
.shuMu span:last-child s{
    position: absolute;
    width: 15px;
    height: 10px;
    line-height: 10px;
    text-align: center;
    background: url(img/d-icon.png) no-repeat;
    border: 1px solid #999;
    cursor: pointer;
}
#jian{
    left: 50px;top:8px;
    background-position: -71.5px -26px;
}
#jia{
    left: 50px;top: 22px;
    background-position: -71.5px -41px;
}

.addProduct{
    width: 200px;
    height: 40px;
    line-height: 40px;
    background-color: #cc3333;
    font-size: 20px;
    color: white;
    text-align: center;
    margin-left: 60px;
    margin-top: 50px;
    cursor: pointer;

}

    </style>
  </head>
  <body>
    <div class="topHeader">
      <div class="topHeadercon">
        <div class="topHeaderleft">
          <p class="greeting">欢迎来酒仙网！</p>
          <a href="" class="headerlogin">请登录</a>
          <a href="" class="headerregist">免费注册</a>
        </div>
        <div class="topHeaderright">
          <ul class="yiji">
            <li class="xiala">
              <a href="">我的酒仙</a>
              <s class="dropicon"></s>
              <ul class="erji">
                <li>我的订单</li>
                <li>物流跟踪</li>
                <li>我的优惠券</li>
              </ul>
            </li>
            <li>
              <a href="">CEO邮箱</a>
            </li>
            <li>
              <s class="icon-gouwuche"></s>
              <a href="">购物车0件</a>
            </li>
            <li>
              <a href="">CLUB会员</a>
              <span>|</span>
            </li>
            <li>
              <a href="">招商入驻</a>
              <span>|</span>
            </li>
            <li class="xiala">
              <s class="phone"></s>
              <a href="">手机逛酒仙</a>
              <span>|</span>
              <p class="erji">
                <img src="img/jxPho-code.jpg" alt="" />
              </p>
            </li>

            <li class="xiala">
              <s class="wzdh"></s>
              <a href="">网站导航</a>
              <s class="dropicon"></s>
              <ul class="erji">
                <li>购物</li>
                <li>活动</li>
                <li>其它</li>
              </ul>
            </li>
            <li class="xiala">
              <s class="kffw"></s>
              <a href="">客服服务</a>
              <s class="dropicon"></s>
              <ul class="erji">
                <li>常见问题</li>
                <li>配送说明</li>
                <li>售后服务</li>
              </ul>
            </li>
            <li class="toplast">客服热线 <i>400-617-9999</i></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 头部banner -->
    <div class="topbanner"></div>
    <!-- 头部搜索 -->
    <div class="topmidHeader">
      <div class="topheader">
        <div class="logo">
          <p>
            <a href="index.html"><img src="img/logo.png" alt="" /></a>
          </p>
          <p>
            <a href="index.html"><img src="img/01.gif" alt="" /></a>
          </p>
        </div>
        <div class="search">
          <div class="searchHome">
            <form action="" method="GET">
              <input type="text" class="searchArea" />
              <input type="submit" value="搜&nbsp;索" class="searchBtn" />
            </form>
          </div>
          <div class="hotwords">
            <p>
              <a href="">老酒<span>|</span></a>
              <a href="">茅台<span>|</span></a>
              <a href="">五粮液<span>|</span></a>
              <a href="">剑南春<span>|</span></a>
              <a href="">人头马<span>|</span></a>
              <a href="">酒鬼<span>|</span></a>
              <a href="">容大<span>|</span></a>
              <a href="">国台<span>|</span></a>
            </p>
          </div>
        </div>
        <div class="boxRight">
          <img src="img/headerProPic1.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 主体导航 -->
    <div class="navwrap">
      <div class="nav">
        <div class="navcategorymenu">
          <h2>全部商品分类</h2>
        </div>
        <div class="navList">
          <a href="">首页</a>
          <a href=""
            >CLUB
            <span class="hot"></span>
          </a>
          <a href="">招商入驻</a>
          <a href="">沱牌舍得</a>
          <a href="">新品</a>
          <a href="">门店加盟</a>
        </div>
        <img src="img/02.gif" alt="" />
      </div>
    </div>
    <div class="List" id="box">
    <script>
      window.onload = function () {
        //获取当前点击的图片
        let pid = localStorage.getItem("pid");
        let url = "http://jx.xuzhixiang.top/ap/api/detail.php?";
        axios
          .get(url, {
            params: {
              id: pid,
            },
          })
          .then((res) => {
            let arr = res.data.data;
            console.log(arr);
            let str = "";
            str += ` <div class="leftList">
                        <div class="picBox">
                            <img src="${arr.pimg}" alt="" id="midImg">
                        <div class="zoom"></div>
                 </div>
                 <div class="zoomBox"><img src="${arr.pimg}" alt="" id="bigImg"></div>
                </div>
                    <div class="midList">
                        <div class="midListTitle">
                                    <p>${arr.pdesc}</p>
                                </div>
                                <div class="midListPrice">
                                    <span>酒仙价</span>
                                    <strong>￥${arr.pprice}</strong>
                                </div>
                                <div class="midListBuy">
                                    <div class="address">
                                        配送到　    <input type="text" value="郑州市 高新区">
                                    </div>
                                    <div class="shuMu">
                                        <span>数量</span>
                                        <span>
                                            <input type="text" value="1" class="amount0">
                                            <s id="jian"></s><s id="jia"></s>
                                        </span>
                                    </div>
                                    <div class="addProduct" >
                                        加入购物车
                                    </div>
                                </div>
                            </div>`;
            let list = document.querySelector(".List");
            list.innerHTML = str;
            addProduct1();
            let scope = new Scope("box");
            scope.init();
          });
        // 商品数量加减
        function addProduct1() {
          let sub = document.getElementById("jia");
          let add = document.getElementById("jian");
          let mai = document.querySelector(".addProduct");
          let oInput = document.querySelector(".amount0");
          sub.onclick = function () {
            let value = parseInt(this.parentNode.children[0].value);
            if (value > 1) {
              value--;
            } else {
              value = 1;
            }
            this.parentNode.children[0].value = value;
          };
          add.onclick = function () {
            let value = parseInt(this.parentNode.children[0].value);
            value++;
            this.parentNode.children[0].value = value;
          };
          mai.onclick = function () {
            let url = "http://jx.xuzhixiang.top/ap/api/add-product.php";
            let uid = 139664;
            let pnum = parseInt(oInput.value);
            axios
              .get(url, {
                params: {
                  uid,
                  pid,
                  pnum,
                },
              })
              .then((res) => {
                // alert(JSON.stringify(res.data));
              });
          };
        }
        //放大镜
        function Scope(id) {
          this.box = document.getElementById(id);
          this.box1 = this.box.querySelector(".picBox");
          this.minimg = this.box1.querySelector("#midImg");
          this.box3 = this.box1.querySelector(".zoom");
          this.box2 = this.box.querySelector(".zoomBox");
          this.maximg = this.box2.querySelector("#bigImg");
        }
        Scope.prototype.init = function () {
          this.box1.onmouseover = () => {
            this.box2.style.display = "block";
            this.box3.style.display = "block";
          };
          this.box1.onmouseout = () => {
            this.box2.style.display = "none";
            this.box3.style.display = "none";
          };
          this.box1.onmousemove = (e) => {
            let evt = e || window.event;
            let x =
              evt.pageX -
              this.box.offsetLeft -
              this.box3.offsetWidth / 2 -
              this.minimg.offsetLeft;
            let y =
              evt.pageY -
              this.box.offsetTop -
              this.box3.offsetHeight / 2 -
              this.minimg.offsetTop;
            //放大镜的范围
            let maxx = this.box1.offsetWidth - this.box3.offsetWidth;
            let maxy = this.box1.offsetHeight - this.box3.offsetHeight;

            x = x <= 0 ? 0 : x >= maxx ? maxx : x;
            y = y <= 0 ? 0 : y >= maxy ? maxy : y;

            this.box3.style.left = x + "px";
            this.box3.style.top = y + "px";

            this.maximg.style.left =
              -this.box3.offsetLeft *
                (this.maximg.offsetWidth / this.box1.offsetWidth) +
              "px";
            this.maximg.style.top =
              -this.box3.offsetTop *
                (this.maximg.offsetHeight / this.box1.offsetHeight) +
              "px";
          };
        };
        return false;
      };
    </script>
  </body>
</html>
